<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息管理系统</title>
    <link rel="stylesheet" href="../../static/css/all.min.css">
    <link rel="stylesheet" href="../../static/css/StudentManage.css">

    <script src="../../static/js/sweetalert2@11.js" defer></script>
    <script src="../../static/js/marked.min.js" defer></script>
    <link rel="stylesheet" href="../../static/css/sweetalert2.min.css">
    <script src="../../static/js/jquery.js"></script>
    <script src="../../static/js/jquery.cookie.js"></script>
    <script src="../../static/js/StudentManage.js" defer></script>

</head>
<body>
<div class="container">
    <header>
        <!--        &lt;!&ndash; 添加用户信息栏 &ndash;&gt;-->
        <!--        <div class="user-info">-->
        <!--            <div class="user-avatar">-->
        <!--                <img src="https://xww123456.oss-cn-beijing.aliyuncs.com/test.jpg" alt="用户头像">-->
        <!--            </div>-->
        <!--            <div class="user-name">管理员</div>-->
        <!--            <div class="logout-btn" title="退出登录">-->
        <!--                <i class="fas fa-sign-out-alt"></i>-->
        <!--            </div>-->
        <!--        </div>-->


        <h1><i class="fas fa-user-graduate"></i> 学生信息管理</h1>
    </header>

    <main>
        <div class="card">
            <div class="toolbar">
                <div class="search-group">
                    <div class="search-box">
                        <label for="name-search">姓名</label>
                        <i class="fas fa-user"></i>
                        <input type="text" id="name-search" placeholder="输入姓名搜索">
                    </div>
                    <div class="search-box">
                        <label for="class-search"> 班级</label>
                        <i class="fas fa-users fa-icon"></i>
                        <select id="class-search" class="class-search">
                            <option>选择班级</option>

                        </select>
                    </div>
                    <div class="search-box">
                        <label for="phone-search">手机号</label>
                        <i class="fas fa-phone"></i>
                        <input type="text" id="phone-search" placeholder="输入手机号搜索">
                    </div>
                </div>
                <button id="search-btn" class="btn btn-primary pulse">
                    <i class="fas fa-search"></i> 搜索
                </button>
                <button id="add-btn" class="btn btn-success">
                    <i class="fas fa-plus"></i> 添加学生
                </button>
            </div>

            <div class="table-container">
                <table id="student-table">
                    <thead>
                    <tr>
                        <th width="5%">ID</th>
                        <th width="8%">头像</th>
                        <th width="18%">姓名</th>
                        <th width="18%">密码</th>
                        <th width="12%">年龄</th>
                        <th width="18%">性别</th>
                        <th width="22%">班级</th>
                        <th width="20%">学号</th>
                        <th width="18%">手机号</th>
                        <th width="10%">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- 数据将通过JavaScript动态生成 -->
                    </tbody>
                </table>
            </div>

            <!-- 分页控件 -->
            <div class="pagination-container">
                <div class="pagination-info">
                    显示 <span id="start-row">1</span> - <span id="end-row">10</span> 条，共 <span id="total-rows">0</span> 条
                </div>
                <div class="pagination-controls">
                    <div class="pagination-btn first-page" title="第一页">
                        <i class="fas fa-angle-double-left"></i>
                    </div>
                    <div class="pagination-btn prev-page" title="上一页">
                        <i class="fas fa-angle-left"></i>
                    </div>
                    <!-- 页码按钮由JS生成 -->
                    <div class="pagination-btn next-page" title="下一页">
                        <i class="fas fa-angle-right"></i>
                    </div>
                    <div class="pagination-btn last-page" title="最后一页">
                        <i class="fas fa-angle-double-right"></i>
                    </div>
                    <div class="rows-per-page">
                        <span>每页显示：</span>
                        <select id="rows-per-page">
                            <option value="5">5</option>
                            <option value="10" selected>10</option>
                            <option value="20">20</option>
                            <option value="50">50</option>
                        </select>
                    </div>
                </div>
            </div>


        </div>
    </main>

    <!-- 添加学生模态框 -->
    <div id="add-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-user-plus"></i> 添加新学生</h3>
                <button class="close-btn">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="student-name">姓名</label>
                    <input type="text" id="student-name" placeholder="请输入学生姓名">
                </div>
                <div class="form-group">
                    <label for="student-password">密码</label>
                    <input type="text" id="student-password" placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label for="student-age">年龄</label>
                    <input type="text" id="student-age" placeholder="请输入年龄">
                </div>
                <div class="form-group">
                    <label for="student-sex">性别</label>
                    <input type="text" id="student-sex" placeholder="请输入性别">
                </div>
                <div class="form-group">
                    <label for="student-class">班级</label>
                    <select id="student-class" class="class-search">
                        <option>请选择班级</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="student-sno">学号</label>
                    <input type="text" id="student-sno" placeholder="请输入学号">
                </div>
                <div class="form-group">
                    <label for="student-phone">手机号</label>
                    <input type="text" id="student-phone" placeholder="请输入手机号">
                </div>
            </div>
            <div class="modal-footer">
                <button id="cancel-add" class="btn btn-outline">取消</button>
                <button id="save-add" class="btn btn-success">保存</button>
            </div>
        </div>
    </div>

    <!-- 编辑学生模态框 -->
    <div id="edit-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-user-edit"></i> 编辑学生信息</h3>
                <button class="close-btn">&times;</button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="edit-id">
                <div class="form-group">
                    <label for="edit-name">姓名</label>
                    <input type="text" id="edit-name" placeholder="请输入学生姓名">
                </div>
                <div class="form-group">
                    <label for="edit-password">密码</label>
                    <input type="text" id="edit-password" placeholder="请输入学生密码">
                </div>
                <div class="form-group">
                    <label for="edit-age">年龄</label>
                    <input type="text" id="edit-age" placeholder="请输入学生年龄">
                </div>
                <div class="form-group">
                    <label for="edit-sex">性别</label>
                    <input type="text" id="edit-sex" placeholder="请输入学生性别">
                </div>
                <div class="form-group">
                    <label for="edit-class">班级</label>
                    <select class="class-search" id="edit-class">

                    </select>
                </div>
                <div class="form-group">
                    <label for="edit-sno">学号</label>
                    <input type="text" id="edit-sno" placeholder="请输入学号">
                </div>
                <div class="form-group">
                    <label for="edit-phone">手机号</label>
                    <input type="text" id="edit-phone" placeholder="请输入手机号">
                </div>
            </div>
            <div class="modal-footer">
                <button id="cancel-edit" class="btn btn-outline">取消</button>
                <button id="save-edit" class="btn btn-warning">保存修改</button>
            </div>
        </div>
    </div>

    <!-- AI分析模态框 -->
    <div id="ai-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-robot"></i> AI学生分析报告</h3>
                <button class="close-btn">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>学生信息</label>
                    <div style="display: flex; gap: 15px; margin-top: 8px;">
                        <div style="flex: 1; background: #f1f8ff; padding: 12px; border-radius: 8px;">
                            <div><strong>姓名：</strong> <span id="ai-student-name">李小明</span></div>
                            <div><strong>班级：</strong> <span id="ai-student-class">高一(1)班</span></div>
                        </div>
                        <div style="flex: 1; background: #f1f8ff; padding: 12px; border-radius: 8px;">
                            <div><strong>学号：</strong> <span id="ai-student-sno">S2023001</span></div>
                            <div><strong>年龄：</strong> <span id="ai-student-age">16</span>岁</div>
                        </div>
                    </div>
                </div>

                <div id="ai-analysis-content">
                    <div class="ai-loading">
                        <i class="fas fa-cog"></i>
                        <p>AI正在分析学生数据，请稍候...</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a id="download-word" class="btn btn-primary">
                    <i class="fas fa-file-word"></i> 下载Word报告
                </a>
                <button id="close-ai" class="btn btn-outline">关闭</button>
            </div>
        </div>
    </div>
</div>


</div>


</body>
</html>